<script setup>
const props = defineProps({
  record: {
    type: Object,
    default: () => ({})
  },
})
const emits = defineEmits(['read'])

function readHandle() {
  emits('read', props.record)
}
</script>

<template>
  <div class="msg-item-wrap">
    <div class="msg-header">
      <div class="avatar-wrap" :class="{active:!record.isRead}">
        <svg-icon icon="xiaoxi" class="avatar-icon"/>
      </div>
      <div class="msg-title">
        <span>{{ record.title }}</span>
      </div>
      <div class="msg-time">
        <span>{{ record.time }}</span>
      </div>
    </div>
    <div class="msg-content">
      <span>{{ record.content }}</span>
    </div>
    <div class="msg-footer" v-if="!record.isRead">
      <el-button
          size="small"
          type="warning"
          @click="readHandle"
          :disabled="record.isRead"
      >设为已读
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.msg-item-wrap {
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  background: #f6f6f6;
  margin-bottom: 24px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all .1s ease;

  &:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);

  }

  .msg-footer {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
  }

  .msg-content {
    margin-top: 16px;
    line-height: 1.5;
    font-size: 16px;
    color: #171717;
    word-break: break-all;
  }


  .msg-header {
    display: flex;
    align-items: center;

    .msg-time {
      color: #9e9e9e;
      font-size: 12px;
      margin-left: auto;
    }

    .msg-title {
      margin-left: 8px;
      font-size: 18px;
      color: #15161A;;
    }

    .avatar-wrap {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #fb7917;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &.active {
        &:before {
          content: "";
          display: block;
          width: 7px;
          height: 7px;
          background: #fc4845;
          border-radius: 50%;
          overflow: hidden;
          position: absolute;
          right: -7px;
          top: -2px;
        }
      }

      .avatar-icon {
        color: #fff;
        font-size: 24px;
      }
    }
  }

}
</style>
